import React, { Component } from "react";
import { Carousel } from "antd-mobile";
import "./inedx.scss";
/**
 * 轮播图
 */
const data = [
  {
    id: "1",
    imgSrc: "https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/1.png",
    alt: "",
  },
  {
    id: "2",
    imgSrc: "https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/2.png",
    alt: "",
  },
  {
    id: "4",
    imgSrc: "https://sxit-gc.oss-cn-beijing.aliyuncs.com/xyzf/4.png",
    alt: "",
  },
];

class MyCarousel extends Component {
  // TODO 在组件挂载的时候发送请求获取轮播图信息
  // 备注需要先设置 默认值 否则会有bug
  // 第一步 在状态添加一个 表示轮播图加载成功的数据
  state = {
    isRender: true,
  };
  // 第二部 轮播图数据加载完成时 修改该数据为true
  componentDidMount() {
    // 模拟发送请求
    // 并且将isRender 为true
  }

  // 第三步 只有状态为true 再进行渲染

  // 渲染轮播图
  renderCarousel = () => {
    return (
      <Carousel
        autoplay={true}
        autoplayInterval={2000}
        infinite
        dotStyle={{ backgroundColor: "#a2bcf1" }}
        dotActiveStyle={{ backgroundColor: "#336ce0" }}
        swipeSpeed={20}
      >
        {data.map((val) => (
          <a
            key={val.id}
            href="https://www.csdn.net/"
            style={{
              display: "inline-block",
              width: "100%",
              height: 212,
            }}
          >
            <img
              src={val.imgSrc}
              alt={val.alt}
              style={{ width: "100%", verticalAlign: "top" }}
              // 如果页面发生变法则改变图片大小
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event("resize"));
                this.setState({ imgHeight: "auto" });
              }}
            />
          </a>
        ))}
      </Carousel>
    );
  };
  render() {
    return (
      <div className="CarouselWrapper" style={{ height: "212px" }}>
        {this.state.isRender ? this.renderCarousel() : ""}
      </div>
    );
  }
}

export default MyCarousel;
